<template>
    <div class="slider">
        <swiper ref="mySwiper"
                :options="swiperOptions"
                :not-next-tick="swiperOptions.notNextTick"
                @slideChangeTransitionEnd="changeIndex"
        >
            <swiper-slide v-for="(item,key) in banners" :key="key">
                <router-link :to="item.href">
                    <img :src="item.src" alt="" style="width:100%;">
                </router-link>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "slider",
        props:{
            banners:Array,
            swiperOptions:{
                type: Object,
                default(){
                    return{
                        pagination: {
                            el: '.swiper-pagination'
                        },
                        loop:true,
                        autoplay:true,
                        notNextTick:false
                    }
                }
            }
        },
        methods:{
            changeIndex(){
                this.$emit("change-index",this.swiper.activeIndex+1)
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        }
    }
</script>
